<template>
	<view class="main-record" :style="{height:containerHeight + 'px'}">
		<view class="content" ref="targetDom" id="targetDom">
			<image id="img" :src="bgImg" mode="scaleToFill" class="cover_img" @load="imageLoad"
				:style="{height:containerHeight + 'px'}"></image>
			<view class="info-top box box-tb box-pack-center box-align-center">
				<h3>劳动教育评估报告</h3>
				<i class="bg"></i>
				<view class="student-name">
					{{schoolInfo.name}}
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="">
						一、评价主要依据
					</view>
				</view>
				<view class="mt10 font-10">
					<view class="list">
						（一）教育教学指导思想评价
					</view>
					<view class="list">
						（二）教育教学模式评价
					</view>
					<view class="list">
						（三）教育教学内容评价
					</view>
					<view class="list">
						（四）教育教学效果评价
					</view>
					<view class="list">
						（五）存在的问题分析
					</view>
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="">
						二、评价结论
					</view>
				</view>
				<view class="mt10 font-10">
					<view class="list">
						经公司多位劳动教育指导专家横向纵向深入分析比对，一致
						认为此教育教学数据真实有效，且教育教学效果显著。

					</view>
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="">
						三、附评估作证材料
					</view>
				</view>
				<view class="mt10 font-10">
					<view class="list">
						详见《学校劳动教育学生成绩排名名单》
					</view>
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="">
						四、劳动统计数据
					</view>
				</view>
				<view class="mt10 font-10">
					<view class="list box box box-align-center">
						老师：共 <strong style="color: #2932BE;">{{info.trCnt}}</strong>位、共批阅<strong
							style="color: #2932BE;">{{info.pyCnt}}</strong>次
					</view>
					<view class="list box box box-align-center" style="flex-wrap: wrap;">
						学生：共 <strong style="color: #2932BE;">{{info.stuCnt}}</strong>位、共学习<strong
							style="color: #2932BE;">{{info.learnedTime}}</strong>、班级风采<strong
							style="color: #2932BE;">{{info.ldfcCnt}}</strong>次、实践打卡<strong
							style="color: #2932BE;">{{info.uploadCnt}}</strong>次
					</view>
				</view>
			</view>

			<view class="foot">
				<view class="cont">
					<view class="tr" v-if="schoolInfo.officialSeal==''||schoolInfo.officialSeal ==null">
						北京永恒信业教育科技有限公司
					</view>
					<view class="tr" v-else>
						{{schoolInfo.officialSeal}}
					</view>
					<view class="tr">
						{{schoolInfo.secondname == null?` 三协同劳动教育教学联盟校学术服务团队`:schoolInfo.secondname}}
					</view>
					<view class="tr">
						{{info.date}}
					</view>
				</view>
			</view>
			<view class="img box box-tb">
				<img style="width: 70px;height: 70px;" :src="imgUrl" alt=""
					v-if="schoolInfo.officialSeal==''||schoolInfo.officialSeal ==null">
				<img style="width: 70px;height: 70px;" :src="schoolInfo.officialSealUrl" alt="" v-else>
				<img src="https://www.wytldy.com/file/20230629/1687972856685lg.png" style="width: 79rpx;height: 124rpx;margin-top: 50px;" alt="">
			</view>
		</view>
		<!-- <u-button @click="downLoad">下载</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				containerHeight: 0,
				user: uni.getStorageSync('user'),
				bgImg: "https://yhlyy.oss-cn-beijing.aliyuncs.com/D96AD61E25B74B8EBFC3E5540DD34C18bg2.png?Expires=4837661811&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=o03qdWgqGiOrSQ5eH5j2nJC5wyI%3D",
				info: {
					stuCnt: 0,
					trCnt: 0,
					pyCnt: 0,
					learnedTime: 0,
					date: '',
					schoolName: '',
					uploadCnt: 0
				},
				currSchool: uni.getStorageSync('currSchool'),
				schoolInfo: {
					name:'',
					officialSeal: '',
					officialSealUrl: ''
				},
				imgUrl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/1810DF96C0654594839B149634C4633E%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230516004551.png?Expires=4837769159&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cNJP29vYI%2FGb3Fo3oNkkOxNNhHg%3D'
			}
		},
		onLoad() {

			
			this.getXnXq()
		},
		methods: {
			imageLoad: function(e) {
				var _this = this;
				/* 图片容器的id */
				var id = e.currentTarget.id;
				/* 图片容器对应数组数据的索引 */

				/* 查询图片容器的宽度 */
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).boundingClientRect(data => {
					/* 计算图片容器的宽度 */
					_this.containerHeight = data.width * e.detail.height / e.detail.width;
					/* 强制刷新。如不强制刷新，则图片容器高度不会改变 */
					_this.$forceUpdate();
				}).exec();
			},
			getXnXq() {
				let opts = {
					url: '/comm/getCurXnxq',
					method: 'post'
				};
				console.log("打印学年学期======");
				this.$api.RPost(opts).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.xnxq = res.curxnxq
						this.getByIdData()
						this.getData(res.curxnxq.curxn,res.curxnxq.curxq)
					}

				})
			},
			getData(curxn,curxq) {
				let opts = {
					url: '/tongji/pgbg',
					method: 'post'
				};
				let params = {
					schoolid: this.currSchool.id,
					xn: curxn,
					xq: curxq
				};
				console.log("打印数据信息======");
				console.log(params);
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.info = res.data
					}

				})
			},
			getByIdData() {
				let opts = {
					url: '/yschool/getById',
					method: 'post'
				};
				let params = {
					id: this.currSchool.id,
				};
				console.log("打印学校信息======");
				console.log(params);
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.schoolInfo = res.school
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mt10 {
		margin-top: 5px;
	}

	.main-record {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		// height: 553px;
		// background: url(https://yhlyy.oss-cn-beijing.aliyuncs.com/D96AD61E25B74B8EBFC3E5540DD34C18bg2.png?Expires=4837661811&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=o03qdWgqGiOrSQ5eH5j2nJC5wyI%3D);
		background-size: 100%;
		background-repeat: no-repeat;
		border: 1px solid transparent;

		.content {
			padding: 0 15%;

			.info-top {
				margin-top: 50px;

				.bg {
					margin-top: 6px;
					display: block;
					width: 60%;
					height: 15px;
					background: url(https://yhlyy.oss-cn-beijing.aliyuncs.com/5F5066C77FCB46819661E8477B00AA79%E5%88%86%E9%9A%94%E7%BA%B9.png?Expires=4837662195&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=XT%2FvgpZYJYGIysTxAEIiyemuC64%3D);
					background-size: 100%;
					background-repeat: no-repeat;
				}

				h3,
				.student-name {
					color: #8C5A3E;
				}

				h3 {
					font-weight: bold;
					font-size: 18px;
				}

				.student-name {
					font-size: 32rpx;
				}
			}

			.course_info {
				margin-top: 10px;

				.font-10 {
					font-size: 20rpx;
				}

				.line {
					margin-top: 3px;
					margin-bottom: 3px;
					width: 47px;
					height: 1px;
					background: #8C5A3E;
					opacity: 0.78;
					border-radius: 50%;
				}

				.info_title {
					font-size: 24rpx;
					color: #865935;
				}
			}

			.foot {
				position: absolute;
				bottom: 9%;
				right: 18%;

				.cont {
					position: relative;
					font-size: 20rpx;
				}
			}
		}
	}

	.tr {
		text-align: right;
	}

	.img {
		position: absolute;
		top: 240rpx;
		right: 42px;
	}

	.cover_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}
</style>
